import React from 'react'
import { changeNav } from '../../../actions'
import { gosmartdr,getexample } from '../../../actions/smartDr.js'
import { connect } from 'react-redux'
import CSSModules from 'react-css-modules'
import styles from './smartDr.less'
import hhistory from '../../../history'
import { WingBlank,WhiteSpace,List,Flex,Button } from 'antd-mobile'
import { ajaxGet } from 'wxAjaxUtil';

const Item = List.Item;
const Brief = Item.Brief;

@CSSModules(styles, { allowMultiple: true })
class SmartDr extends React.Component{
	componentDidMount(){
		this.props.tochangeNav({title:"智慧餐厅"});
	}
	render(){
		return(
			<div>
				<WhiteSpace />
				<div styleName="smartdrbg">
					<div styleName="smartdr smartdrleft">
						<img src="https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png" alt=""/>
					</div>
					<div styleName="smartdr smartdrright">
						<h4>智慧餐厅</h4>
						<p styleName="smartdr-desc">介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍</p>
						<p styleName="smartdr-twofee">
							服务费（服务费）<span>&yen;500</span>
						</p>
						<p styleName="smartdr-twofee">
							开通费（每店）<span>&yen;0</span>
						</p>
					</div>
				</div>
				
				<div style={{ background:"#fff" }}>
				<WingBlank>
					<span styleName="smartdr-common">已开通集团：</span><span styleName="smartdr-common smartdr-orange" style={{ paddingRight:"30px" }}>123</span>
					<span styleName="smartdr-common">已开通门店：</span><span styleName="smartdr-common smartdr-orange">1506</span>
				</WingBlank>
				</div>
				<WhiteSpace />
				<List className="my-list">
			        <Item extra={'1 年'}>购买时长</Item>
			    </List>
			    <WhiteSpace />
				<List className="my-list">
			    	<Item wrap>Multiple line，long text will wrap；Long Text Long Text Long Text Long Text Long Text Long Text</Item>
			    </List>
			    <WhiteSpace />
			    <WingBlank>
				    <Flex>
				      <Flex.Item>
				      	<Button type="primary"
				      	onClick={ ()=>{ hhistory.push('/AoTenant') } }>查看已开通商户</Button>
				      </Flex.Item>
				      <Flex.Item>
				      	<Button type="primary" 
				      	onClick={ ()=>{ hhistory.push('/openSmartdr') } }>新开通商户</Button>
				      </Flex.Item>
				    </Flex>
					<Button type="primary" 
				      	onClick={
							  ()=>{
								this.props.gosmartdr()
							  }
						  }>测试{this.props.testnum}</Button>
					<Button type="primary" 
				      	onClick={
							  ()=>{
								this.props.getexample()
							  }
						  }>测试请求接口</Button>
					<Button type="primary" 
				      	onClick={
							  ()=>{
								ajaxGet( "bd/product" ).then( res=>console.log(res) )
							  }
						  }>测试直接调接口</Button>

			    </WingBlank>
			</div>
		)
	}
}

const mapStateToProps = (state) => ({
	testnum: state.testnum
})

const mapDispatchToProps = ( dispatch ) => {
	return{
		tochangeNav:navobj => dispatch( changeNav( navobj ) ),
		gosmartdr:() => dispatch( gosmartdr() ),
		getexample:() => dispatch( getexample() )
	}
}

export default connect( mapStateToProps,mapDispatchToProps )( SmartDr )